<template>
    <div id="article-push" class="article-push float-left">
        <p class="push-title">最新文章</p>
        <!-- <hr /> -->
        <ul>
            <li
                class="push-item"
                v-for="articleItem in pushArticle"
                :key="articleItem.index"
            >
                <p>{{ articleItem.time }}</p>
                <p>
                    <a :href="articleItem.href">
                        {{ articleItem.title }}
                    </a>
                </p>
                <p>{{ articleItem.label }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'article-push',
    data(){
        return{
            pushArticle: [
                {
                    title: "阿里云服务器架设教程",
                    href: "#",
                    time: "2021-4-23",
                    label: "web前端",
                },
                {
                    title: "Linux常用命令",
                    href: "#",
                    time: "2021-4-23",
                    label: "web前端",
                },
                {
                    title: "软件十佳评选结果",
                    href: "#",
                    time: "2021-4-23",
                    label: "web前端",
                },
                {
                    title: "Switch开箱",
                    href: "#",
                    time: "2021-4-23",
                    label: "web前端",
                },
                // { "title": "前端返回顶部组件解析", "href": "#", "time" : "2021-4-23", "label" : "web前端"  },
                // { "title": "QQ自动登陆脚本教程", "href": "#" , "time" : "2021-4-23", "label" : "web前端" },
                // { "title": "Python三大常用爬虫框架", "href": "#" , "time" : "2021-4-23", "label" : "web前端" },
                // { "title": "QT6官方效果展示视频发布", "href": "#", "time" : "2021-4-23", "label" : "web前端"  },
                // { "title": "Arduino智能家居系统搭建指南", "href": "#" , "time" : "2021-4-23", "label" : "web前端" },
            ]
        }
    }
};
</script>

<style lang="scss" scoped>
.article-push {
    box-sizing: border-box;
    width: 22%;
    height: 400px;
    background-color: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    .push-title {
        padding-left: 5%;
        font-size: 13px;
        font-weight: bold;
        color: #6b6b6b;
        padding-top: 15px;
        margin-bottom: 5px;
    }
    ul {
        padding-left: 1em;
    }
    .push-item {
        height: 5em;
        font-size: 13px;
        margin: 20px 0px;
        list-style-type: none;
        background: url("../../../assets/images/userImg.jpg") no-repeat;
        background-size: 5em 5em;
        text-indent: 5.5em;
        p {
            margin: 0;
            color: #6b6b6b;
            a {
                color: #414040;
            }
        }
    }
}
</style>